<template>
    <div>
      <div class="wrapper">
        <div class="FindPwd" style="margin: 100px auto;background-color: #fff; width: 400px;height: 430px; padding: 20px;border-radius: 10px">
            <div style="margin-bottom:70px;text-align: center;font-size: 20px" class="login_title"><b>找回密码</b></div>
            <el-select size="medium" style="margin: 10px 0;width:160px" v-model="value" clearable placeholder="请选择身份">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-mobile-phone" placeholder="请输入手机号" v-model="user.phone"></el-input>
            <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-s-promotion" placeholder="请输入验证码" v-model="phoneCode">
                <el-button slot="append" @click="getCode">获取验证码</el-button>
                <!--                          <el-button v-else slot="append" :disabled="disabled">{{second}}秒后获取</el-button>-->
            </el-input>
          <button class="findPwd" @click="sure">确认
          </button>
<!--            <el-button type="primary"style="width:100%;background: #42b983" autocomplete="off" @click="sure">确定</el-button>-->
        </div>

      </div>
    </div>
</template>

<script>
    export default {
        name: "FindPwd",
        data() {
            return {
                user: {},
                options: [{//身份选择
                    value: '选项1',
                    label: '管理员'
                }, {
                    value: '选项2',
                    label: '用户'
                }, {
                    value: '选项3',
                    label: '租户'
                }, {
                    value: '选项4',
                    label: '答者'
                }],
                value: ''
            }
        },
      methods:{
        getCode(){

        },
        sure(){

        }
      },
    }
</script>

<style scoped>

.FindPwd{
  background-clip:padding-box ;
  margin: 0px 0px;
  overflow: hidden;
  border-radius: 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.65);
}
body{
  margin: 0px;
  padding: 0px;
}
.login_title{
  text-align: center;
  margin: 20px 0 40px auto;
}
.wrapper {
  height: 100vh;
  background-image: url("@/views/bg.png");

  /*背景图不缩放*/
  background-size: cover;
  webkit-background-size: cover;
  -o-background-size: cover;
  /*背景图不滚动*/
  background-attachment: fixed;

  overflow: hidden;
}
button.findPwd {
  padding: 15px 25px;
  border: unset;
  border-radius: 15px;
  color: #fff;
  z-index: 1;
  background: #42b983;
  position: relative;
  font-weight: 1000;
  font-size: 17px;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  transition: all 250ms;
  overflow: hidden;
  margin-top: 30px;
  width:350px
}

button.findPwd::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 15px;
  background-color: #fff;
  z-index: -1;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  transition: all 250ms
}

button.findPwd:hover {
  color: #212121;
}

button.findPwd:hover::before {
  width: 100%;
}
</style>